<template>
  <div>
    <input v-model="title" class="title" type="text" placeholder="标题" />
    <quill-editor :content="content" :options="editorOption" @change="onEditorChange($event)" />
    <button @click="createArticle()">发布文章</button>
  </div>
</template>

<script>
export default {
  name: "Write",
  data() {
    return {
      title: "",
      content: "",
      editorOption: {
        // Some Quill options...
      }
    };
  },
  methods: {
    onEditorChange({ quill, html, text }) {
      // console.log("editor change!", quill, html, text);
      this.content = html;
    },
    createArticle() {
      if (this.content.length == 0 || this.title.length == 0) {
        alert("内容不可为空");
        return;
      }
      let _this = this;
      const userInfo = JSON.parse(window.localStorage.getItem("blogUserInfo"));
      if (!userInfo || !userInfo.user_id) {
        alert("请登录！");
        return;
      }
      this.$axios
        .post("blog/createArticle", {
          title: _this.title,
          content: _this.content,
          userId: userInfo.user_id
        })
        .then(function(res) {
          if (res.status == 200) {
            alert("发布成功");
            _this.$router.push("/");
          } else {
            alert("发布失败");
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.title {
  width: 98%;
  padding: 0 1%;
  height: 35px;
  margin-bottom: 10px;
  font-size: 14px;
}

.quill-editor {
  height: 500px;
  overflow: hidden;
  background: #eee;
}
</style>
